<!--
 * @Author: Strayer
 * @Date: 2025-04-15
 * @LastEditors: Strayer
 * @LastEditTime: 2025-05-07
 * @Description: 元件icon面板
 * @FilePath: \processDraw\src\components\processDrawEdit\iconPanel.vue
-->

<template>
  <div class="iconPanel el-message-box">
    <div class="iconPanel__header">
      <div class="iconPanel__title-row">
        <div class="iconPanel__title-with-help">
          <h3 class="iconPanel__title">
            元件库
          </h3>
          <el-button
            class="iconPanel__button iconPanel__button--help"
            size="small"
            @click="showHelpDialog"
          >
            <i class="help-icon">?</i>
          </el-button>
        </div>
        <div class="iconPanel__title-buttons">
          <el-button
            type="primary"
            size="small"
            @click="emit('submitDrawing')"
          >
            提交
          </el-button>
          <el-button
            type="danger"
            size="small"
            @click="clearCanvas"
          >
            清空画布
          </el-button>
          <el-button
            size="small"
            @click="togglePanel"
          >
            {{ isPanelCollapsed ? '展开' : '收起' }}
          </el-button>
        </div>
      </div>
      <div class="iconPanel__tools">
        <el-button
          v-if="currentDrawLineType"
          size="small"
          @click="currentDrawLineType = 0"
        >
          取消画线
        </el-button>
        <template v-else>
          <el-button
            size="small"
            @click="currentDrawLineType = 1"
          >
            画直角实线
          </el-button>
          <el-button
            size="small"
            @click="currentDrawLineType = 2"
          >
            画直角虚线
          </el-button>
          <el-button
            size="small"
            @click="currentDrawLineType = 3"
          >
            画任意虚线
          </el-button>
        </template>
      </div>
    </div>
    
    <div
      v-show="!isPanelCollapsed"
      class="iconPanel__content"
    >
      <!-- 一般文字 -->
      <div
        class="iconItem"
        draggable="true"
        :ondragstart="(event: any) => dragstart(event, {key: 'text'})"
      >
        <div class="iconItem__image">
          <p>文本内容</p>
        </div>
        <p class="iconItem__label">
          文字
        </p>
      </div>
      <!-- 数据框 -->
      <div
        class="iconItem"
        draggable="true"
        :ondragstart="(event: any) => dragstart(event, {key: 'dataBox'})"
      >
        <div class="iconItem__image">
          <p>数据框</p>
        </div>
        <p class="iconItem__label">
          数据框
        </p>
      </div>
      <!-- 元件 -->
      <div 
        v-for="item in panelData" 
        :key="item.key"
        class="iconItem"
        draggable="true"
        :ondragstart="(event: any) => dragstart(event, item)"
      >
        <div class="iconItem__image">
          <svg 
            v-if="item.path"
            class="localSvg" 
            version="1.1" 
            :viewBox="`0 0 ${item.width>100? 100:item.width} ${item.height>100? 100:item.height}`"
            :width="item.width>100? 100:item.width"
            :height="item.height>100? 100:item.height"
            xmlns="http://www.w3.org/2000/svg" 
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <path
              :fill="item.color ?? '#54BECC'"
              :stroke="item.stroke ?? 'none'"
              :d="item.path"
            />
          </svg>
          <img
            v-else
            :src="`${item.img}`"
            :width="item.width>100? 100:item.width"
          >
        </div>
        <p class="iconItem__label">
          {{ item.label }}
        </p>
      </div>
    </div>
    
    <!-- 帮助弹窗 -->
    <div
      v-if="isHelpDialogVisible"
      class="help-dialog-overlay"
      @click="closeHelpDialog"
    >
      <div
        class="help-dialog"
        @click.stop
      >
        <div class="help-dialog__header">
          <h3>操作说明</h3>
          <button
            class="help-dialog__close"
            @click="closeHelpDialog"
          >
            ×
          </button>
        </div>
        <div class="help-dialog__content">
          <ul class="help-dialog__list">
            <li
              v-for="(item, index) in helpData"
              :key="index"
            >
              <strong>{{ index + 1 }}. {{ item.title }}：</strong>{{ item.text }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { shallowRef, ref, watch } from 'vue';
import { canvasDataRef, panelData } from './data';
import { client2Canvas, drawLineReal, removeElHandle } from './comm';
import { Canvas } from '@antv/g';

const props = defineProps<{
  canvas?: Canvas,
}>()

const emit = defineEmits<{
  (e: 'submitDrawing'): void;
}>();

const helpData = shallowRef([
  {
    title: '画布移动和缩放',
    text: '鼠标左键按住画布任意位置拖动和鼠标滚轮缩放'
  },
  {
    title: '添加元件',
    text: '在元件面板上把鼠标放在元件上按住左键不放拖拽到画布上即可'
  },
  {
    title: '添加管道',
    text: '在元件面板顶部单击画线按钮。然后去画布用鼠标左键双击开始画线，单击一次生成一个折线点位。双击结束生成管道'
  },
  {
    title: '删除元件和管道',
    text: '右键元件或管道选择删除（或按键盘的delete键删除选中的元素）'
  },
  {
    title: '移动元件和管道',
    text: '鼠标左键按住元件或管道拖动即可'
  },
  {
    title: '旋转元件',
    text: '鼠标左键按住元件右上角的旋转图标拖动即可'
  },
  {
    title: '缩放元件',
    text: '鼠标左键按住元件右边的小点拖动即可'
  },
  {
    title: '管道节点拖拽',
    text: '点击一下管道，出现管道节点。鼠标左键按住管道节点拖动即可'
  },
  {
    title: '样式修改',
    text: '鼠标左键选中对应元件后，在右上角的样式修改框中修改即可'
  },
  {
    title: '文本添加',
    text: '元件面板上的文字按钮拖动到画布上即可'
  },
  {
    title: '复制粘贴',
    text: '鼠标左键选中对应元件后，ctrl+c复制，然后把鼠标移动到要放置的位置ctrl+v粘贴'
  },
  {
    title: '层级调整',
    text: '鼠标右键菜单选择置顶或置底'
  },
  {
    title: '删除画布上所有元素',
    text: '在元件库面板上点击清空画布按钮'
  },
  {
    title: '前进后退',
    text: 'ctrl+z 撤回；ctrl+y 重做'
  },
])

const isPanelCollapsed = ref(false);
const isHelpDialogVisible = ref(false);

function togglePanel() {
  isPanelCollapsed.value = !isPanelCollapsed.value;
}

function showHelpDialog() {
  isHelpDialogVisible.value = true;
}

function closeHelpDialog() {
  isHelpDialogVisible.value = false;
}

function dragstart(event: any, item: any) {
  event.dataTransfer.setData('Text', item.key);  
}

/**
 * @description: 清空画布
 */
function  clearCanvas() {
  for(const item of [...canvasDataRef.value.imgData, ...canvasDataRef.value.lineData, ...canvasDataRef.value.textData]) {
    if(item.editType.isRemove)  continue;

    removeElHandle(props.canvas!, item.id);
  }
  props.canvas?.destroyChildren();
}

// 当前画线类型
const currentDrawLineType = ref(0) // 0 不画线 1 画直角实线 2 画直角虚线 3 画任意虚线

watch(() => props.canvas, (val) => {
  if(val) {
    let perTapTime = new Date();
    val.addEventListener('click', (event: MouseEvent) => {
      // 两次点击的时间少于300ms判断为双击
      const nowTapTime = new Date();
      if(nowTapTime.getTime() - perTapTime.getTime() < 300) {
        // 计算坐标
        const point = client2Canvas(props.canvas!, [event.clientX, event.clientY])

        if(currentDrawLineType.value === 1) {
          drawLineReal(props.canvas!, { coord: [[point.x, point.y]], angle90: true })
        } else if(currentDrawLineType.value === 2) {
          drawLineReal(props.canvas!, { coord: [[point.x, point.y]], style: { lineDash: [4, 4] }, angle90: true })
        } else if(currentDrawLineType.value === 3) {
          drawLineReal(props.canvas!, { coord: [[point.x, point.y]], style: { lineDash: [4, 4] } })
        }
      }
      perTapTime = nowTapTime;
    })
  }
}, { immediate: true })

</script>

<style scoped>
.iconPanel {
  position: absolute;
  top: 10px;
  left: 10px;

  /* background-color: var(--el-bg-color-overlay); */
  background-color: #fff;

  /* border: 1px solid var(--el-color-primary); */
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  width: 420px;
  overflow: hidden;
  transition: all 0.3s ease;
  color: #333;
  max-height: 80%;

  /* [data-theme="black"] & {
    color: #fff;
  } */
}

.iconPanel__header {
  display: flex;
  flex-direction: column;
  padding: 12px 15px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
}

.iconPanel__title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #e0e0e0;
}

.iconPanel__title-with-help {
  display: flex;
  align-items: center;
  gap: 8px;
}

.iconPanel__title {
  margin: 0;
  font-size: 16px;
  color: #303133;
  font-weight: 600;
}

.iconPanel__title-buttons {
  display: flex;
  gap: 8px;
}

.iconPanel__tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.iconPanel__toggle {
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.iconPanel__toggle:hover {
  background-color: #66b1ff;
}

.iconPanel__content {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 15px;
  max-height: 70vh;
  overflow-y: auto;
}

.iconItem {
  width: 90px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  border-radius: 6px;
  cursor: move;
  transition: all 0.2s ease;

  /* background-color: var(--page-background); */
  background-color: #f5f7fa;
  overflow: hidden; /* 添加溢出隐藏 */
}

.iconItem:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: #ecf5ff;
}

.iconItem__image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  width: 100%;
  overflow: hidden;
}

.iconItem__image img,
.iconItem__image svg {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.iconItem__label {
  margin: 6px 0 0;
  font-size: 12px;
  color: #606266;
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-icon {
  font-style: normal;
  font-weight: bold;
}

/* 帮助弹窗样式 */
.help-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.help-dialog {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  width: 600px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.help-dialog__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #e4e7ed;
}

.help-dialog__header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.help-dialog__close {
  background: none;
  border: none;
  font-size: 22px;
  color: #909399;
  cursor: pointer;
}

.help-dialog__close:hover {
  color: #409eff;
}

.help-dialog__content {
  padding: 20px;
  overflow-y: auto;
}

.help-dialog__list {
  margin: 0;
  padding: 0 0 0 20px;
  list-style-type: disc;
}

.help-dialog__list li {
  margin-bottom: 12px;
  line-height: 1.5;
  color: #606266;
}
</style>